<template>
  <div class="appPage">
    <!--    <div class="crumbs">-->
    <!--      <el-breadcrumb separator="/">-->
    <!--        <el-breadcrumb-item>-->
    <!--          基础表格-->
    <!--        </el-breadcrumb-item>-->
    <!--      </el-breadcrumb>-->
    <!--    </div>-->
    <h3 class="tit">通话记录</h3>
    <div class="search">
      <div class="left">
        <span>手机号</span>
        <el-input v-model="phone" placeholder="请输入手机号" class="handle-input mr10"></el-input>

        <span>绑定ID</span>
        <el-input v-model="callid" placeholder="请输入callid" class="handle-input mr10"></el-input>
        
        <span>子企业编号</span>
        <el-input v-model="id" placeholder="子企业编号" class="handle-input mr10"></el-input>

        
      </div>
      <div class="right">
        <el-button type="primary" 
        icon="el-icon-search" 
        @click="handleSearch" 
        class="searchBtn">查找</el-button>

        <el-button type="primary" 
        icon="el-icon-refresh" 
        @click="reset()" 
        class="reset">重置</el-button>
      </div>
    </div>
    <div class="container">
      <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" label="子企业编号" align="center"></el-table-column>
        <el-table-column prop="active_phone" label="主叫" align="center"></el-table-column>
        <el-table-column prop="passive_phone" label="被叫" align="center"></el-table-column>
        <el-table-column prop="bind_phone" label="中间号" align="center"></el-table-column>
        <!--        <el-table-column label="账户余额">-->
        <!--          <template #default="scope">￥{{ scope.row.money }}</template>-->
        <!--        </el-table-column>-->
<!--        <el-table-column prop="IP地址" label="IP地址" align="center"></el-table-column>-->
<!--        <el-table-column prop="计费时间（秒）" label="计费时间（秒）" align="center"></el-table-column>-->
        <el-table-column prop="start_time" label="开始时间" align="center"></el-table-column>
        <el-table-column prop="release_time" label="结束时间" align="center"></el-table-column>
        <el-table-column label="录音"  align="center">
          <template #default="scope">
            <!-- <a :href="scope.row.record_url">{{scope.row.record_url}}</a> -->
            <el-button type="primary" 
            icon="el-icon-search" 
            @click="startaudio(scope)" 
            class="searchBtn">查看录音</el-button>
            <!-- <audio href="scope.row.record_url" controls= "controls"></audio> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="pageIndex"
            :page-size="pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 编辑弹出框 -->
    <!-- <el-dialog title="编辑" v-model="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
      </template>
    </el-dialog> -->
    <el-dialog
      title="录音"
      v-model="Showaudio"
      width="30%"
      :before-close="handleClose">
      <audio :src="currentAudio" controls="controls"></audio>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "callLog",
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      delList: [],
      address: "",
      pageIndex: 1,//当前在第几页
      pageSize: 10,//前端规定每页显示数量
      editVisible: false,//是否显示编辑/添加弹窗
      pageTotal: 0,//总共有多少数据
      form: {},
      phone:null,
      id: null,
      page:1,//接口请求的页数
      size:10,//接口请求的每页的数量
      callid:null,
      url:"",
      Showaudio:false,
      currentAudio:'',
      audioPaused:false
    };
  },
  created() {
      this.getList();
  },
  
  watch: {
    phone(){
      if (this.phone == "") {
        this.phone = null;
      };
    },
    callid(){
      if(this.callid == ""){
        this.callid = null;
      }
    
    },
  },
  methods: {
    startaudio(row){
      console.log(row.row.record_url)
      if(row.row.record_url == '略'){
        this.$message.warning('暂无音频')
      }else{
        this.currentAudio = row.row.record_url
        this.Showaudio = true
      }
    },
    // 分页导航
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    getList(){
      let params = {
        page:this.page,
        size:this.size,
        phone:this.phone,
        call_id:this.callid,
        uuid:this.id
      }   
      // axios.post("http://118.190.2.70:9999/vo/callLog/list",params)
      axios.post("http://118.190.2.70:9999/vo/callLog/list",params)
      .then((res) =>{
        console.log(res.data.data)
        // console.log(res.data.data.record_url)
          if(res.data.success == false){  
                this.$router.push('/403')
          }else{
                this.tableData = res.data.data
                this.pageTotal = res.data.total
          }
      })
      .catch(err=>{
        console.log(err)
      })
    },


    //搜索查询
    handleSearch(){
      this.getList()
    },
    //重置刷新按钮
    reset(){
      this.phone = null
      this.callid = null
      this.id = null
      this.getList()
    }
  },
};
</script>

<style scoped>

.tit{
  font-weight: normal;
  font-size: 36px;
  color: #333333;
}
.search{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.left{
  display: flex;
  align-items: center;
}
.left span{
  width: 311px;
  text-align:center
}
.searchBtn{
  margin-left: 15px;
}
.right{
  display: flex;
}
.reset{
  width: 80px;
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.add{
  margin-left: 15px;
}
.container{
  margin-top: 20px;
}
div /deep/ .el-dialog__body{
  display: flex;
  justify-content: center;
}
</style>
